<template>
  <div class="login-wrapper">
    <div class="modal">
      <el-form ref="userForm" :model="user" status-icon :rules="rules">
        <div class="head">
          <div class="title">酷点后台</div>
          <div class="tips">-Vue3.0 后台管理系统</div>
        </div>
        <el-form-item prop="username" label="账户">
          <el-input
              type="text"
              prefix-icon="el-icon-user"
              v-model="user.username"
              placeholder="请输入登录用户名"
          />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
              type="password"
              prefix-icon="el-icon-view"
              v-model="user.password"
              placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <div class="login-button-wrapper">
            <div class="login-service-item">登录表示您已同意<a>《服务条款》</a></div>
            <el-button type="primary" class="btn-login" @click="login"
            >登录</el-button
            >
            <div class="checkbox"><el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox></div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user"
export default {
  name: "login",
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      checked:false
    };
  },
  methods: {
    login() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          login(this.user).then((res)=>{
            this.$store.commit("saveUserInfo", res);
          })
        } else {
          return false;
        }
      });
    },
    // async loadAsyncRoutes() {
    //   let userInfo = storage.getItem("userInfo") || {};
    //   if (userInfo.token) {
    //     try {
    //       // const { menuList } = await this.$api.getPermissionList();
    //       // let routes = utils.generateRoute(menuList);
    //       // routes.map((route) => {
    //       //   let url = `./../views/${route.component}.vue`;
    //       //   route.component = () => import(url);
    //       //   this.router.addRoute("home", route);
    //       // });
    //     } catch (error) {}
    //   }
    // },
  },
};
</script>

<style lang="scss">
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fcff;
  width: 100vw;
  height: 100vh;
  .modal {
    width: 500px;
    height: 500px;
    padding: 50px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px 3px #c7c9cb4d;
    text-align: center;
    .head {
      padding: 40px 0 40px 0;
      .title {
        font-size: 35px;
        line-height: 1.5;
        text-align: center;
        color: #146F9A;
        margin-bottom: 5px;
      }
      .tips {
        font-size: 15px;
        color: #999;
        text-align: right;
      }
    }
    .login-button-wrapper {
      width: 60%;
      text-align: center;
      margin: 0 auto;
      .login-service-item {
        text-align: left;
      }
      .btn-login {
        background-color: #146F9A;
        width: 100%;
      }
      .checkbox {
        text-align: left;
      }
    }

  }
}
</style>